<template>
  <Dialog title="选择客户" v-model="dialogVisible" width="1000px">
    <ContentWrap>
      <el-table
        :data="listData"
        style="width: 100%"
        ref="multipleTable"
        :row-key="rowKey"
        :stripe="true"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" :reserve-selection="true" />
        <el-table-column label="群名称" prop="name" show-overflow-tooltip>
          <template #default="scope">
            <div class="flex items-center">
              <span class="cursor-pointer block w-126px text-left break-word color-#0052cc">{{
                scope.row.name
              }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="ownerNickname" label="群主" width="100" />
        <el-table-column align="center" prop="name" label="成员数量" width="100">
          <template #default="scope">
            {{ scope.row.memberList ? scope.row.memberList.length : 0 }}
          </template>
        </el-table-column>
        <el-table-column
          label="上次聊天"
          align="center"
          prop="lastChatTime"
          width="180"
          :formatter="dateFormatter"
        />
        <el-table-column
          label="创建时间"
          align="center"
          width="180"
          prop="createTime"
          :formatter="dateFormatter"
        />
      </el-table>
      <Pagination
        :total="totals"
        v-model:page="params.pageNo"
        v-model:limit="params.pageSize"
        @pagination="listPage"
      />
    </ContentWrap>
    <template #footer>
      <el-button @click="submit" type="primary" :disabled="selectValue">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup>
import { getWeChatGroupPage } from '@/api/wecom/chatgroup/index.ts'
import { dateFormatter } from '@/utils/formatTime'
const dialogVisible = ref(false)
const totals = ref(0)
const params = ref({
  pageNo: 1,
  pageSize: 10,
  isAll: 1
})
const listData = ref([])
const multipleTable = ref(null)
/*显示*/
const openDialog = (arr) => {
  dialogVisible.value = true
  getList()
  if (arr.length) {
    setTimeout(() => {
      arr.forEach((row) => {
        multipleTable.value.toggleRowSelection(row, true)
      })
    }, 0)
  }
}
const rowKey = (row) => {
  return row.id
}
const listPage = (val) => {
  params.value.pageNo = val.page
  getList()
}
const getList = async () => {
  const { list, total } = await getWeChatGroupPage({ ...params.value })
  listData.value = list
  totals.value = total
}
const selectValue = computed(() => {
  return changeValue.value.length == 0
})
const changeValue = ref([])
const handleSelectionChange = (val) => {
  changeValue.value = val
}
const emit = defineEmits(['success'])
// 选择的群
const submit = () => {
  dialogVisible.value = false
  emit('success', changeValue.value)
}
defineExpose({ openDialog })
</script>
